import ByIcon from "@/components/ui/ByIcon";
import ByRow from "@/components/ui/ByRow";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";

const menus = [
  { label: "直播", icon: "Camera", url: "monitor" },
  { label: "考勤记录", icon: "Records", url: "index" },
  { label: "行为告警", icon: "Warning", url: "alarm" },
];

export default ({
  active = 0,
  intentCustomerId,
}: {
  active?: 0 | 1 | 2;
  intentCustomerId: number;
}) => {
  const handleClick = (index) => {
    if (active === index) return;

    const { url } = menus[index];
    Taro.navigateTo({
      url: `${url}?intentCustomerId=${intentCustomerId}`,
    });
  };

  return (
    <ByRow content="between" align="end">
      {menus.map((item, index) => (
        <View
          className={`px-3 text-center ${
            index === active ? "text-primary" : "text-third"
          }`}
          key={index}
          onClick={() => handleClick(index)}
        >
          <ByIcon name={item.icon} size={34} />
          <View className="mt-0.5 text-xs">{item.label}</View>
        </View>
      ))}
    </ByRow>
  );
};
